@import "../_base/_function";
*, *:before, *:after {
  box-sizing: border-box;
}

.clearfix {
  @include clearfix();
}

.ui-fl {
  float: left;
}

.ui-fr {
  float: right;
}

.ui-pc {
  height: 100%;
  padding: $baseWid;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background: #fff;
  .ui-header {
    border-bottom: 2px solid $border-color;
    position: relative;
    h3 {
      font-size: 24px;
    }
    p {
      color: #999;
      line-height: 1.8;
      padding-bottom: 1em;
    }
    .ico {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .ui-form {
    height: 100%;
    padding: 0 10px;
    margin-top: 10px;
    overflow: auto;
  }
  .ui-panel-footer {
    border-top: 1px solid #ffb37f;
    padding: 20px 0;
    margin-top: 20px;
    a {
      font-size: 12px;
      line-height: 28px;
      color: #ff6900;
      text-decoration: none;
    }
    .ui-fl {
      a {
        margin-right: 40px;
      }
    }
    .ui-fr {
      a {
        margin-left: 40px;
        &:first-child {
          margin-left: 0;
        }
      }
    }
    .ui-btn {
      background: #ff6900;
      width: 100px;
      text-align: center;
      color: #fff;
      display: inline-block;
    }
  }
  .ui-footer {
    border-top: 1px solid #ffb37f;
    padding: 20px 0;
    margin-top: 20px;
    .link {
      @include inline-block();
      margin-right: 30px;
    }
  }
}

.ui-m-select {
  border: $border-style;
  padding-left: 10px;
  background: #fff;
  position: relative;
  display: block;
  height: 38px;
  line-height: 38px;
  color: $primary-color;
  margin-top: 5px;
  text-decoration: none;
  &:after {
    content: '>';
    font-family: serif;
    font-size: 16px;
    position: absolute;
    font-weight: bold;
    top: 0;
    right: 8px;
    color: #999;
  }
  &:hover {
    background: #fff;
    color: $primary-color;
  }
}

.ui-mobile {
  .ui-form {
    padding: 0 10px 0 11px;
    .ui-wrap {
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%;
    }
    .ui-panel {
      margin-top: 5px;
      background: #fff;
      padding: 10px;
      border: $border-style;
      .label {
        display: block !important;
        margin-bottom: 0;
      }
    }
    .input-text {
      border-color: transparent !important;
      padding: 0 5px;
      &:focus {
        outline: none;
      }
    }
    .ui-checkbox,
    .ui-radio,
    .ui-calendar,
    .ui-upload,
    .ui-preview,
    .ui-add,
    .ui-select {
      background: none;
      border: 0;
      &.ui-panel {
        padding: 10px 0;
      }
      .label {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }
    }
  }
  .ico-close {
    display: none;
  }
}

.ui-panel {
  padding-top: $baseWid;
  position: relative;
  width: 100%;
  .error-tip {
    color: $error;
    display: block;
    font-size: 12px;
    text-align: right;
    padding: 3px;
    width: 100%;
    display: none;
  }
  .placeholder{
    background: #fff;
    color: #888;
    position: absolute;
    left:$baseWid;
    top: 7px;
  }
  .label {
    display: block;
    margin-bottom: $baseWid/2;
    position: relative;
    &.label-require {
      &:before {
        content: '*';
        color: $orange;
        padding: 0 3px;
        vertical-align: middle;
      }
    }
  }
  .date-drop {
    @include inline-block();
    vertical-align: middle;
    line-height: 40px;
    border: $border-style;
    text-align: left;
    padding-left: 1em;
    width: 25%;
    margin: 0 $baseWid/2;
    position: relative;
    &:after {
      position: absolute;
      right: $baseWid/2;
      top: 50%;
      margin-top: -5px;
      @include triangle(top, #666, 6px, 6px);
    }

  }
  &.ui-span {
    .span {
      @include inline-block();
      margin: 0 5px;
    }
  }
  &.ui-row {
    @include clearfix();
    .label {
      width: 19%;
      @include inline-block();
      margin-bottom: 0;
      vertical-align: middle;
      line-height: 1.2;
      text-align: right;
      &:after {
        @include inline-block();
        vertical-align: middle;
        height: 36px;
        content: "";
      }
    }
    .ui-pc-box, .input-text, .textarea, .preview-box,.info {
      width: 80%;
      position: relative;
      float: right;
    }
  }
  &.ui-item-line {
    .item {
      @include inline-block();
      margin-right: 5px;
    }
  }

}
.ui-error {
  .error-tip {
    display: block;
  }
}

.ui-show{
  .label{
    color: #999;
  }
  &.ui-row{
    .label{
      padding-top: 10px;
      line-height: 24px;
      &:after{
         display: none;
      }
    }
    .info{
      padding-top: 10px;
      line-height: 24px;
    }

  }

}

.ui-group {
  @include clearfix();
  width: 100%;
  .ui-panel {
    width: 50%;
    &.ui-fr {
      width: 49%;
    }
    &.ui-row {
      .label {
        width: 38%;
      }
      .input-text,.info,.textarea,.preview-box,.ui-pc-box{
        width: 60%;
      }
    }
  }
}

.ico-upload{
  @include inline-block();
  width: 35px;
  height: 40px;
  background: url("./assets/images/sprites-icon.png") no-repeat;
  &.ico-upload-img{
    background-position: -5px -190px;
  }
}







